<template>
  <div class="page-container-padding page-view">
    <div class="module-box">
      <vab-icon :icon="['fas', 'file-signature']" class="icon"></vab-icon>
      <span class="module-name">{{ pageTitle }}</span>
    </div>
    <div class="actions-bar">
      <el-select
        v-model="reportData.dept_examine_state"
        @change="handleQueryChange"
      >
        <el-option :value="0" label="待审核" />
        <el-option :value="1" label="审核通过" />
        <el-option :value="-1" label="拒绝" />
        <el-option :value="90" label="标记报告" />
      </el-select>
      <el-button type="primary" style="margin-left: 6px" @click="toQueryReport">
        查询
      </el-button>
      <div class="right">
        <el-input
          v-model="examineNoteAll"
          placeholder="对待审核的条目批注内容"
        />
        <el-button type="text" @click="toExamineNoteAll">一键批注</el-button>
        <el-button type="success" @click="toHandleExamineAll(1)">
          全通过
        </el-button>
        <el-button type="danger" @click="toHandleExamineAll(-1)">
          全拒绝
        </el-button>
      </div>
    </div>
    <div class="report-table">
      <el-table
        border
        stripe
        :data="reportData.rows"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="file_date" label="报告日期" width="110" />
        <el-table-column label="名称" show-overflow-tooltip min-width="400">
          <template #default="{ row }">
            <div class="file-title" @click="toShowFile(row)">
              <vab-icon :icon="['fas', 'file-pdf']"></vab-icon>
              {{ row.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="variety_name"
          label="品种"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column prop="dept_examine_note" label="审核批注" width="450">
          <template #default="{ row }">
            <div class="examine-col">
              <el-select v-model="row.dept_examine_state" style="width: 145px">
                <el-option :value="0" label="待审核" />
                <el-option :value="1" label="审核通过" />
                <el-option :value="-1" label="拒绝" />
              </el-select>
              <el-input
                v-model="row.dept_examine_note"
                placeholder="在此输入审核批注"
              />
              <el-button type="text" @click="toHandleExamineRow(row)">
                保存
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="160" />
        <el-table-column
          prop="admin_name"
          label="创建者"
          width="80"
          show-overflow-tooltip
        />
        <el-table-column label="操作" width="80">
          <template #default="{ row }">
            <el-button
              type="text"
              :class="row.mark_state === 1 ? 'red-btn' : ''"
              @click="toMarkEvent(row)"
            >
              事后标记
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        hide-on-single-page
        layout="prev, pager, next, jumper"
        style="margin-top: 10px"
        :current-page.sync="reportData.page"
        :page-size="reportData.pageSize"
        :total="reportData.totalCount"
        @current-change="getReports"
      />
    </div>
    <el-dialog
      :visible.sync="mark.showDialog"
      :title="mark.title"
      width="400px"
    >
      <div>
        <el-input
          v-model="mark.markText"
          placeholder="在此输入报告的问题描述，空白保存可反标记"
          type="textarea"
          :row="5"
        />
      </div>
      <template #footer>
        <el-button @click="mark.showDialog = false">取消</el-button>
        <el-button
          type="primary"
          :loading="mark.markLoading"
          @click="toMarkRow"
        >
          确定保存
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import {
    GetExamineReport,
    PutExamineReport,
    PostMarkReport,
  } from '@/api/departmentWork/periodReport'
  export default {
    data() {
      return {
        fileType: 'Daily',
        pageTitle: '部门审核【日报】',
        reportLoading: false,
        examineNoteAll: '',
        reportData: {
          page: 1,
          pageSize: 20,
          totalCount: 0,
          dept_examine_state: 0,
          markState: 0,
          rows: [],
        },
        mark: {
          showDialog: false,
          markId: null,
          title: '',
          markText: '',
          markLoading: false,
        },
      }
    },
    mounted() {
      this.getReports()
    },
    methods: {
      getReports() {
        let deptExamineState = this.reportData.dept_examine_state
        if (this.reportData.dept_examine_state === 90) {
          this.reportData.markState = 1
          deptExamineState = 1
        } else {
          this.reportData.markState = 0
        }
        this.reportLoading = true
        GetExamineReport(
          this.fileType,
          2,
          deptExamineState,
          this.reportData.markState,
          this.reportData.page,
          this.reportData.pageSize
        )
          .then((res) => {
            this.reportData.rows = res.data.data
            this.reportData.page = res.data.page
            this.reportData.totalCount = res.data.total_count
            this.reportLoading = false
          })
          .catch(() => {
            this.reportLoading = false
          })
      },
      handleQueryChange() {
        this.reportData.page = 1
        this.getReports()
      },
      toQueryReport() {
        this.reportData.page = 1
        this.getReports()
      },
      toShowFile(row) {
        window.open(row.file_url)
      },
      toExamineNoteAll() {
        const examneNote = this.examineNoteAll.trim()
        for (let i = 0; i < this.reportData.rows.length; i++) {
          if (this.reportData.rows[i].dept_examine_state === 0) {
            this.reportData.rows[i].dept_examine_note = examneNote
          }
        }
        this.$baseMessage('一键批注完成~', 'success')
      },
      toHandleExamineAll(exState) {
        const tipMsg =
          exState === 1
            ? '确定对待审批记录一键全通过?'
            : '确定对待审批记录一键全拒绝?'
        this.$baseConfirm(tipMsg, '提示', () => {
          const examineList = []
          for (let i = 0; i < this.reportData.rows.length; i++) {
            const _obj = this.reportData.rows[i]
            if (_obj.dept_examine_state === 0) {
              examineList.push({
                id: _obj.id,
                examine_state: exState,
                examine_note: _obj.dept_examine_note,
                ex_type: 'Dept',
              })
            }
          }
          this.saveExamineList(examineList)
        })
      },
      toHandleExamineRow(row) {
        this.saveExamineList([
          {
            id: row.id,
            examine_state: row.dept_examine_state,
            examine_note: row.dept_examine_note,
            ex_type: 'Dept',
          },
        ])
      },
      saveExamineList(examineRows) {
        PutExamineReport(examineRows).then((res) => {
          this.$baseMessage(res.msg, 'success')
          this.getReports()
        })
      },
      toMarkEvent(row) {
        if (row.dept_examine_state !== 1) {
          this.$baseMessage('该报告尚待审核，不能进行标记.', 'error')
          return
        }
        this.mark.title = row.title
        this.mark.markId = row.id
        this.mark.markText = row.mark_note
        this.mark.showDialog = true
      },
      toMarkRow() {
        this.mark.markLoading = true
        PostMarkReport({
          rid: this.mark.markId,
          mark_text: this.mark.markText,
        })
          .then((res) => {
            this.$baseMessage(res.msg, 'success')
            this.mark.markLoading = false
            this.mark.showDialog = false
            this.getReports()
          })
          .catch(() => {
            this.mark.markLoading = false
          })
      },
      tableRowClassName({ row }) {
        if (row.dept_examine_state === -1) {
          return 'examine-reject'
        } else if (row.dept_examine_state === 0) {
          return 'examine-stay'
        } else {
          return 'examine-pass'
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  .page-view {
    .module-box {
      padding: 4px 6px;
      font-size: 16px;
      font-weight: 700;
      border-radius: 5px 5px 0 0;
      margin-bottom: 16px;
      .icon {
        color: #fd5516;
      }
      .module-name {
        margin-left: 10px;
      }
    }
    .actions-bar {
      display: flex;
      align-items: center;
      .right {
        margin-left: auto;
        display: flex;
        align-items: center;
        .el-input ::v-deep .el-input__inner {
          border: none;
          box-shadow: none;
          border-bottom: 1px solid #555;
          border-radius: 0;
          padding: 0;
        }
      }
    }
    .report-table {
      margin-top: 10px;
      .file-title {
        cursor: pointer;
      }
      .examine-col {
        display: flex;
        align-items: center;
      }
      .el-select ::v-deep .el-input__inner {
        border: none;
        box-shadow: none;
        border-bottom: 1px solid #5db0fd;
        border-radius: 0;
      }
      .el-input ::v-deep .el-input__inner {
        border: none;
        box-shadow: none;
        border-bottom: 1px solid #555;
        border-radius: 0;
        padding: 0;
      }
      .red-btn {
        color: #cf3437;
      }
    }
    .el-table ::v-deep .examine-reject {
      color: #cf3437;
    }
    .el-table ::v-deep .examine-stay {
      color: #444;
    }
    .el-table ::v-deep .examine-pass {
      color: #0e5195;
    }
  }
</style>
